<template>
	<view>
		<view class="goods-item" @click="clickHandle">
			<view class="radio-item" v-if="showRadio">
				<radio @click="radioClick" color="#ea4350" :checked="goods.goods_state"></radio>
			</view>
			<!-- 左 -->
			<view class="left">
				<image :src="goods.goods_small_logo || defaultImagSrc" mode=""></image>
			</view>
			<!-- 右 -->
			<view class="right">
				<!-- 上 -->
				<view class="title">{{goods.goods_name}}</view>
				<!-- 下 -->
				<view class="bottom">
					<view class="price">{{goods.goods_price | priceFormat}}</view>
					<block v-if="showNum">
						<uni-number-box :value="goods.goods_count" min="1" @change="changeHandler"></uni-number-box>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		name: "my-goods",
		props: {
			showNum: {
				type: Boolean,
				default: false
			},
			goods: {
				type: Object,
				default: () => {}
			},
			showRadio: {
				type: Boolean,
				dafault: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			//计数器数字改变时
			changeHandler(val) {
				this.$emit('num-change', {
					goods_count: val,
					goods_id: this.goods.goods_id
				})
			},
			// 选择框点击事件
			radioClick() {
				this.$emit('radio-click', this.goods)
			},
			clickHandle() {
				this.$emit('click', this.goods)
			}
		},
		filters: {
			priceFormat(val) {
				return val.toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.radio-item {
		margin-top: 70rpx;
	}

	.goods-item {
		display: flex;
		border: 1px solid #eee;
		padding: 6px 0;

		.left {
			margin-right: 6px;

			image {
				width: 100px;
				height: 100px;
			}
		}

		.right {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 12px;
			}

			.price {
				color: #ea4350;
			}

			.bottom {
				display: flex;
			}
		}
	}
</style>
